<template>
  <div class="h100">
    <v-tree @getOrgId="getOrgId" :params="dParams">
      <el-button
        type="default"
        icon="el-icon-refresh-right"
        class="ml10 pd10"
        slot="search"
        title="同步"
        @click="update"
      ></el-button>
      <span slot="content" ref="curID" class="content" slot-scope="curNum">
        <div class="statistic" v-if="dParams.order_by === 'aliyun_ecs'">
          <div>
            <div class="title f14 font-gray">ECS数量</div>
            <div class="value f18 font-org fb">{{ curNum.data.aliyun_ecs_num_total || '0' }}</div>
          </div>
          <div>
            <div class="title f14 font-gray">内存使用总量</div>
            <div class="value f18 font-org fb">{{ curNum.data.aliyun_ecs_memory_total || '0' }}</div>
          </div>
          <!-- <div>
            <div class="title f14 font-gray">内存总量</div>
            <div class="value f18 font-org fb">{{ curNum.data.aliyun_ecs_memory_quota || '0' }}</div>
          </div>-->
          <div>
            <div class="title f14 font-gray">CPU使用总量</div>
            <div class="value f18 font-org fb">{{ curNum.data.aliyun_ecs_cpu_total || '0' }}</div>
          </div>
          <!-- <div>
            <div class="title f14 font-gray">CPU总量</div>
            <div class="value f18 font-org fb">{{ curNum.data.aliyun_ecs_cpu_quota || '0' }}</div>
          </div>-->
        </div>
        <el-radio-group
          v-model="active"
          @change="getDataList"
          v-if="dParams.order_by === 'aliyun_ecs'"
        >
          <el-radio-button label="aliyun">阿里云</el-radio-button>
          <el-radio-button label="zstack">应急资源云</el-radio-button>
        </el-radio-group>
        <div class="tab-content">
          <div class="listbox">
            <v-list
              v-if="params.department"
              :api="api.getUrl"
              ref="list"
              cards="1"
              :cols="cols"
              :params="params"
            >
              <template slot="head">
                <t-header :to="dParams.order_by"></t-header>
              </template>
              <template slot="item" slot-scope="props">
                <t-item :props="props" :to="dParams.order_by"></t-item>
              </template>
            </v-list>
          </div>
        </div>
      </span>
    </v-tree>
    <!-- 详情开始 -->
    <v-baseinfo v-model="drawer.show" :name="drawer.name">
      <div class="wrapper-content" v-if="drawer.data" slot="org/home">
        <div class="content-item">
          <span class="label">实例名称：</span>
          <span class="value">{{drawer.data.instance_name || '-'}}</span>
        </div>
      </div>
    </v-baseinfo>
    <!-- 详情结束 -->
  </div>
</template>

<script>
import THeader from "../commpoents/table_header";
import TItem from "../commpoents/table_item";
export default {
  components: {
    THeader,
    TItem
  },
  data() {
    return {
      params: {
        type: "aliyun",
        department: "",
        zyj: "",
        page: 1,
        pagesize: 20
      },
      active: "aliyun",
      drawer: {
        show: false,
        data: null,
        name: "云主机"
      },
      cols: "150,100,100,100,100,100,100,150",
      api: {
        getUrl: "",
        syncUrl: ""
      },
      dParams: {
        order_by: ""
      }
    };
  },
  watch: {
    $route: {
      handler(to, form) {
        this.initReq(to);
      }
    }
  },
  methods: {
    initReq(route) {
      let mod = route.path.split("/")[3];
      if (mod === "ecs") {
        this.api.getUrl = `instance.get_${mod}`;
      } else {
        this.api.getUrl = `instance.get_aliyun_${mod}`;
      }
      this.api.syncUrl = `instance.sync_aliyun_${mod}`;
      this.dParams.order_by = `aliyun_${mod}`;
      this.$set(this.dParams);
      // 设置表格样式
      if (mod === "oss") {
        this.cols = "150,100,100,100,100,100";
      }
    },
    setBaseInfo(item) {
      this.drawer.show = true;
      this.drawer.data = item;
    },
    update() {
      this.$api.jget(this.api.syncUrl).then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
        } else {
          this.$error(res.msg);
        }
      });
    },
    getDataList(val) {
      this.params.type = val;
    },
    getOrgId(id) {
      if (this.params.department !== id) {
        this.params.department = id;
      }
    }
  },
  mounted() {
    this.initReq(this.$route);
  }
};
</script>

<style lang="scss" scoped>
.statistic {
  height: 80px;
  border: 1px solid #efefef;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  & > div {
    text-align: center;
    .value {
      margin: 5px 0;
    }
  }
}
.tab-content {
  // border: 1px solid #e4e7ed;
  // border-top: 0;
}
.content {
  display: inline-block;
  min-width: 600px;
  width: 100%;
}
</style>
